<!-- 滚动加载表格组件 -->
<template>
	  	<el-table
			height="600"
		  	:data="visibleData"
		  	style="width: 100%">
            <!-- 动态列表格 -->
            <el-table-column :prop="index" :label="item" sortable v-for="(item, index) in tableHeader"
                       :key="index">
            </el-table-column>
            <!-- 底部文案 -->

      <template #append>
        <div style="width: 100%; height: 80px; border: 1px solid pink;">
            <button >submit</button>
        </div>
      </template>
    	</el-table>
</template>
<script>
export default {
    props:{
        //表格列信息
        tableHeader: {
            type: Object,
            required: true
        },
        //表格数据 注意需要增量（第一次是30条 第二次为30+10条....）
        tableData: {
            type: Array,
            required: true
        },
        //用于下拉查询新一页的数据信息 入参（页码，页数大小）
        method: { 
            type: Function
        },
        //初始行数（最好不要小于当前页面size，否则滚动下载有失效的可能，且size必须为10的倍数）
        initCount: {
            type: Number,
            required: true
        }
    },
    mounted() {
       
    },
    data () {
		return {
			visibleCount: 30,
            content: '滚动到底部加载更多',
            pageIndex: 1,
            pageSize: 10,
        }    
	},
    created() {
        console.info("创建了...")
        this.visibleCount = this.initCount
        this.pageIndex = this.initCount/this.pageSize
	},
    computed: {
		// 是否禁止无限加载
		disabledLoad() {
			return false
		},
		
		visibleData() {
			return this.tableData.slice(0, Math.min(this.tableData.length, this.visibleCount))
		}
	},
	methods: {
		async loadmore () {
			console.log('滚动到底部了')
            this.pageIndex++
            await this.method(this.pageIndex ,this.pageSize)
            this.visibleCount += 10
            if(this.visibleCount > this.tableData.length){
                this.content = '暂无更多数据'
            }
		},
	}
}
</script>
